import React, { useEffect, useState } from 'react';
import { Button, ConfigProvider, Typography, Spin, Result, Divider, theme } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
import { CustomFrame } from '../components/CustomFrame';
import { MainAppConfig } from '../types/mainApp';

const { Paragraph } = Typography;

// AppConfig 接口定义移至 types/app.ts

// 扩展React的CSS属性以包含 a-webkit-app-region
declare module 'react' {
  interface CSSProperties {
    WebkitAppRegion?: 'drag' | 'no-drag';
  }
}

const UpdateContent = () => {
  const [updateInfo, setUpdateInfo] = useState<MainAppConfig | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchUpdateInfo = async () => {
      try {
        const info = await window.electronAPI.runTask<MainAppConfig | null>('get-update-info');
        if (info) {
          setUpdateInfo(info);
        } else {
          setError("没有可用的更新信息。");
        }
      } catch (e) {
        console.error("加载更新信息失败:", e);
        setError("加载更新信息失败，请检查您的网络连接。");
      } finally {
        setLoading(false);
      }
    };
    fetchUpdateInfo();
  }, []);

  if (loading) {
    return (
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
        <Spin size="large" tip="正在检查更新..." />
      </div>
    );
  }
  
  if (error || !updateInfo) {
    return (
        <Result
            status="error"
            title="检查更新失败"
            subTitle={error || "无法连接到服务器，请检查您的网络连接。"}
        />
    );
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      {/* 顶部信息和按钮，固定高度 */}
      <div style={{ flexShrink: 0 }}>
        <Result
          icon={null}
          status="info"
          title={`发现新版本 ${updateInfo.version_name}`}
          subTitle="为了获得更好的体验，我们建议您立即更新。"
          extra={[
            <Button
              type="default"
              key="update"
              icon={<DownloadOutlined />}
              size="large"
              onClick={() => window.electronAPI.runTask('perform-update', updateInfo.download_url)}
            >
              立即更新
            </Button>,
          ]}
        />
      </div>
      
      {/* 更新日志，弹性填充剩余空间 */}
      <div style={{ flex: '1 1 auto', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
        <Divider style={{ flexShrink: 0 }}>更新日志</Divider>
        <Paragraph
          style={{
            flex: '1 1 auto', // 关键：填充所有可用空间
            overflowY: 'auto', // 关键：仅此区域滚动
            whiteSpace: 'pre-wrap',
            padding: '16px',
            background: 'rgba(255, 255, 255, 0.04)',
            borderRadius: '6px',
            textAlign: 'left',
          }}
        >
          {updateInfo.release_notes || '暂无详细更新日志。'}
        </Paragraph>
      </div>
    </div>
  );
};

export const UpdatePage: React.FC = () => {
  return (
    <ConfigProvider
      theme={{
        algorithm: theme.darkAlgorithm,
      }}
    >
      <CustomFrame title="检查更新">
        <UpdateContent />
      </CustomFrame>
    </ConfigProvider>
  );
}; 